<template>
	<view>
		<view class="top-background">
			<!-- <view class="message">
				<image mode="widthFix" style="width: 24px;" src="../../static/person/message.png"></image>
			</view> -->
			<view class="user-info" :style="'top:'+userInfoHeight+'px'">
				<image v-if="userInfo.user_info.photo_url" :src="userInfo.user_info.photo_url"></image>
				<image v-if="!userInfo.user_info.photo_url" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/aueco_wxapp/default.png"></image>
				<text v-if="userInfo.user_info">{{userInfo.user_info.nickname}}</text>
				<button v-if="!userInfo.user_info" class="login_btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">注册/登录</button>
			</view>
			<view class="member">
				<view class="member-text">
					<text>邀请小伙伴</text>
					<text>赚更多钱，还有升级奖励</text>
				</view>
				<view class="member-button" @click="createPoster">邀请海报></view>
			</view>
		</view>

		<!-- 中间菜单栏 -->
		<view class="menu">
		  <view class="menu_title">
		    <view class="title_left">我的订单</view>
		    <view class="title_right" @click="toOrder('')">更多订单</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
		    <image src="../../static/person/tuihuo.png" alt="" />
		    <view class="pay-text">待支付</view>
		    <view class="cartIcon1" v-if="statusPayNum&&statusPayNum!=0">{{statusPayNum}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('2')">
		    <image src="../../static/person/daishouhuo.png" alt=""/>
		    <view class="pay-text">待发货</view>
		    <view class="cartIcon1" v-if="statusSendNum&&statusSendNum!=0">{{statusSendNum}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('3')">
		    <image src="../../static/person/yiwancheng.png" alt=""/>
		    <view class="pay-text">待收货</view>
		    <view class="cartIcon1" v-if="statusReceiveNum&&statusReceiveNum!=0">{{statusReceiveNum}}</view>
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('4')">
		    <image src="../../static/person/tuihuo.png" alt=""/>
		    <view class="pay-text">已完成</view>
		    <!-- <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view> -->
		  </view>
		  <view class="menu_item cartIcon_wrapper" @click="toOrder('9')">
		    <image src="../../static/person/shouhou.png" alt=""/>
		    <view class="pay-text">退款/售后</view>
		    <!-- <view class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</view> -->
		  </view>
		</view>
		<!-- 中间菜单栏 -->

		<view style="width: 100vw;height: 8px;background-color: #EFEFEF;"></view>
		
		<!-- 分销中心 -->
		<view>
			<view style="margin: 10px;">
				<view class="menu_title">
				  <view class="title_left">分销中心</view>
					<view class="title_right" @click="toOtherPage(1)">查看详情	<image class="arrowsIcon" src="../../static/person/fanhui.png" alt=""/></view>
				</view>
				<view style="padding: 0 15px;color: #9D9C9C;font-size: 12px;">
					自购省钱，推广赚钱
				</view>
			</view>
		</view>
		<view style="width: 100vw;height: 8px;background-color: #EFEFEF;"></view>
		<!-- 我的团队 -->
		<view>
			<view style="margin: 10px;">
				<view class="menu_title">
				  <view class="title_left">我的团队</view>
				  <view class="title_right" @click="toOtherPage(2)">团队人数<text v-if="userInfo.teams_count!=undefined" style="margin-left: 5px;"> {{userInfo.teams_count}}</text><image class="arrowsIcon" src="../../static/person/fanhui.png" alt=""/></view>
				</view>
				<view style="padding: 0 15px;color: #9D9C9C;font-size: 12px;">
					分享海报，邀请更多小伙伴加入
				</view>
			</view>
		</view>
		<view style="width: 100vw;height: 8px;background-color: #EFEFEF;"></view>
		<!-- 列表栏 -->
		<view class="list">

			<view class="list_item">
				<button open-type="getPhoneNumber" @getphonenumber="getphonenumber">
					<image src="../../static/person/phone.png"/>
					<span>绑定手机</span>
					<view class="list_item_arrow phone-spec">
						<text v-if="phone">{{phone}}</text>
						<text v-else style="color: #15559a">绑定手机号</text>
			      		<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</button>
			</view>

			<view class="list_item">
			  <navigator v-if="userInfo.user_info" hover-class="none" url="../address/address?type=address" >
			    <image src="../../static/person/shouhuodizhi.png" />
			    <span>收货地址</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt=""/>
			    </span>
			  </navigator>
			  <button v-if="!userInfo.user_info" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
			    <image src="../../static/person/shouhuodizhi.png" />
			    <span>收货地址</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt=""/>
			    </span>
			  </button>
			</view>

			<view class="list_item">
			  <navigator hover-class="none" url="../coupon/coupon" >
			    <image src="../../static/person/jiamen.png" />
			    <span>我的优惠券</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt=""/>
			    </span>
			  </navigator>
			</view>

			<view class="list_item">
			  <button open-type="contact" size="mini"
					  :session-from="'udesk|'+nickname+'|'+photo_url+'|customer^'+customer_info_str"
			  			@contact="contactCallBall">
			    <image src="../../static/person/lianxikefu.png" />
			    <span>联系客服</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt=""/>
			    </span>
			  </button>
			</view>

			<view class="list_item" v-if="aboutUs">
			  <navigator hover-class="none" url="../aboutUs/index" >
			    <image src="../../static/person/shezhi.png" />
			    <span>关于我们</span>
			    <span class="list_item_arrow">
			      <image src="../../static/person/fanhui.png" alt="" />
			    </span>
			  </navigator>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				userInfoHeight: 55,//用户头像和名字距离上面距离
				aboutUs: '',
				statusPayNum: '',
				statusSendNum: '',
				statusReceiveNum: '',
				userToken: '',
				merchant: '',
				user_id: '',
				customer_info_str:"",
				nickname:"-",
				photo_url:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/aueco_wxapp/default.png",
				phone: ''
			}
		},
		onShow(){
            this.getUserInfos();
			this.getAboutUs()
			wx.showTabBar();//防止从首页没登录跳转过来会隐藏tabBar

			this.merchant = wx.getStorageSync('merchant')
			let customer_info = {
				"custom_fields":{
					"TextField_3080": this.merchant.merchant_id,
				}
			}
			this.customer_info_str = JSON.stringify(customer_info)
        },
		onLoad(){
			this.getSystemInfo();
		},
		methods: {
			createPoster() {
				if (this.$store.state.userToken != "") {
					wx.showLoading({
						title: "生成中...",
						mask: true,
					})
					let params = {
						user_token: wx.getStorageSync("userToken")
					}
					this.$api.getShareImg(params,this.$baseUrl).then(res => {
						if (res.data.level = "success") {
							wx.hideLoading();
							wx.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
							wx.previewImage({
							  current: res.data.data.share_img_url, // 当前显示图片的http链接
							  urls: [res.data.data.share_img_url] // 需要预览的图片http链接列表
							})
						} else {
							wx.showToast({
								title: '生成失败！',
								duration: 1500,
								icon: "none"
							});
							
							wx.hideLoading();
						}
			
					})
				} else {
					this.bindGetUserInfo()
				}
			},
			//1为分销中心 2为我的团队
			toOtherPage(num){
				if(num==1){
					wx.navigateTo({
						url:"distribution_centre/distribution_centre"
					})
				}else if(num==2){
					wx.navigateTo({
						url:"myTeam/myTeam"
					})
				}
				
				
			},
			contactCallBall(e) {
				console.log(e)
				if(e.detail.path){
					this.$currency.navigateTo('/pages/udeskCart/index?key='+e.detail.query.key)
				}
			},

			//微信授权
			async bindGetUserInfo(){
                var _this=this;
				let invited_user_id = ""
				//本地找不到就为空
				if(wx.getStorageSync("invited_user_id")){
					invited_user_id = wx.getStorageSync("invited_user_id")
				}else{
					invited_user_id = ""
				}
                uni.login({
                    success: res =>{
                        let code = res.code;
                        uni.getUserInfo({
                            success: async res => {
								wx.showLoading({
									title: '正在登录'
								})
                                let params = {
                                    raw_data:res.rawData,
                                    signature:res.signature,
                                    code:code,
									invited_user_id: invited_user_id //邀请人id
                                }
                                const result = await _this.$api.wxAppLogin(params,this.$baseUrl);
                                if (result.data.level == 'success'){
                                    uni.setStorageSync('userToken',result.data.data);
									wx.hideLoading()
									_this.getUserInfos()
                                } else{
									wx.hideLoading();
									wx.showToast({
										title: result.data.message,
										icon: "none",
										duration: 1500
									})
								}
                            },
							fail: (res) => {
								wx.hideLoading()
							}
                        })
                    }
                })
            },

			//绑定手机号码
			async getphonenumber(e) {
				var _this = this;
				if(!e.detail.iv){
					return
				}
				wx.checkSession({
				  fail:function (res) {
				    wx.login({
				      success: res => {
				        // 获取code
				        _this.code = res.code
				      }
				    })
				  }
				})

				uni.login({
					success: (res) => {
						let code = res.code;
						let userToken = uni.getStorageSync('userToken');
						wx.showLoading({
							title: '正在获取'
						})
						let params = {
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							code: code,
							user_token: userToken
						}
						_this.$api.getWeChatPhone(params,_this.$baseUrl).then(res => {
							if (res.data.level == 'success') {
								if (res.data.message == "获取成功") {
									let tempData = JSON.parse(res.data.data)
									console.log(tempData.phoneNumber)
									let phoneParams = {
										phone: tempData.phoneNumber,
										user_token: userToken
									}
									_this.$api.directBindingPhone(phoneParams,_this.$baseUrl).then(res => {
										wx.showToast({
											title: res.data.message,
											icon: "none",
											duration: 1500
										})
										if (res.data.level == "success") {
											_this.getUserInfos()
										}
									})
								}else{
									wx.showToast({
										title: "获取失败,请重新获取",
										icon: "none",
										duration: 1500
									})
								}
							}else{
								wx.showToast({
									title: res.data.message,
									icon: "none",
									duration: 1500
								})
							}
						})
					},
					fail: (res) => {
						wx.hideLoading()
					}
				})
			},

			//获取个人信息
            async getUserInfos(){
                let userToken=wx.getStorageSync('userToken');
				if(userToken){
					const res=await this.$api.getUserInfos({user_token:userToken},this.$baseUrl);
					if(res.data.level=='success'){
					    this.userInfo=res.data.data
						this.phone = this.userInfo.phone
						console.log()
						uni.setStorageSync('user_id',this.userInfo.id);
						uni.setStorageSync('wx_openid',this.userInfo.wx_openid);
						uni.setStorageSync('photo_url',this.userInfo.user_info.photo_url)
						uni.setStorageSync('nickname',this.userInfo.user_info.nickname)

						this.userToken = userToken
						this.merchant = wx.getStorageSync('merchant')
						//udesk获取用户信息
						if(this.userInfo != ""){
							this.nickname = this.userInfo.user_info.nickname;
							this.photo_url = this.userInfo.user_info.photo_url;
						}
						//获取订单状态数量 TODO 待优化，需要添加接口获取数量，而不是通过获取列表接口
						this.getOrderStatusNum()
					}
				}

            },

			getOrderStatusNum() {
				this.getMyOrderList(1)
				this.getMyOrderList(2)
				this.getMyOrderList(3)
			},

			//获取订单列表
			async getMyOrderList(status){
				let userToken = wx.getStorageSync('userToken');
				let res=await this.$api.getMyOrderList({
					page: 1,
					limit: 1,
					status: status,
					user_token: userToken
				},this.$baseUrl);
				if (res.data.level == 'success'){
					if(status==1){
						this.statusPayNum = res.data.page_info.total;
					} else if(status==2){
						this.statusSendNum = res.data.page_info.total
					} else if(status==3){
						this.statusReceiveNum = res.data.page_info.total
					}

				}
			},

			//进入订单页面
			toOrder(index) {
				wx.navigateTo({
					url: '../order/order?index='+index
				})
			},

			//获取状态栏高度
			getSystemInfo() {
				let systemInfo = wx.getSystemInfoSync();
				if(systemInfo.statusBarHeight){
					let statusBarHeight = systemInfo.statusBarHeight;
					if(systemInfo.system.search("iOS")==0){
						this.userInfoHeight = 10+statusBarHeight
					}else{
						this.userInfoHeight = 20+statusBarHeight
					}
						
				}
			},

			//获取关于我们
			async getAboutUs() {
			  let res = await this.$api.getAboutUs({},this.$baseUrl)
			  if (res.data.level == 'success') {
				  if(res.data.data!=null){
					  this.aboutUs = res.data.data.detail
				  }
			  } else {
			    this.$currency.showToast(res.data.message, 'none', 1500)
			  }
			},


		}
	}
</script>

<style scoped lang="scss">
	.arrowsIcon{
		width: 7px;height: 12px;margin-left: 10px;vertical-align: middle;
	}
	.top-background{
		width: 100vw;
		height: 200px;
		background-image: url(../../static/person/person_backgroud.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		.message{
			position: absolute;
			top: 10px;
			right: 10px;
		}
		.user-info{
			position: absolute;
			top: 80px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
			text{
				margin-top: 8px;
				font-size: 14px;
				color: #FFFFFF;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.login_btn{
			  padding: 0;
			  /*margin: 0;*/
			  background: none;
			  border: none;
			  color: #ffffff;
			}
			.login_btn::after,.nick_name>.phone-btn::after{
			  border: none;
			}
		}
		.member{
			width: calc(100vw - 30px);
			height: 70px;
			position: absolute;
			top: 150px;
			// bottom: -26px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #2C2C2C;
			border-radius: 10px;
			/* background-image: url(../../static/person/member_content.png);
			background-size: 100% auto;
			background-repeat: no-repeat; */
			display: flex;
			justify-content: space-between;
			align-items: center;
			.member-text{
				color: #F2C991;
				font-size: 14px;
				display: flex;
				flex-direction: column;
				margin-left: 28px;
			}
			.member-button{
				width: 80px;
				height: 30px;
				background-color: #EBC28D;
				border-radius: 15px;
				line-height: 30px;
				text-align: center;
				font-size: 12px;
				color: #3A362D;
				margin-right: 15px;
			}
		}
	}

	/* 中间菜单栏 */
	.menu{
	  background: #ffffff;
	  /*background:#222222;*/
	  width:calc(100vw - 20px);
	  display: flex;
	  flex-wrap: wrap;
	  /*height: 100px;*/
	  margin:10px;
	  margin-top: 30px;
	  border-radius: 4px;
	  /*color: #ffffff;*/
	}
	.menu_title{
	  width: 100%;
	  display: flex;
	  height: 30px;
	  padding-bottom: 10px;
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-start;
	}
	.menu_title>.title_left{
	  font-size: 15px;
	  padding: 0 15px;
	  // font-weight: bold;
	}
	.menu_title>.title_right{
	  margin-left: auto;
	  padding: 5px 15px;
	  font-size: 12px;
	  color: #666666;
	  /*color: #aaaaaa;*/
	}
	.menu_item{
	  font-size: 12px;
	  flex:1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  margin: 10px 0;
	}
	.menu_item>image{
	  width:27px;
	  height:25px;
	}
	.pay-text{
		margin-top: 8px;
	}

	/* 列表栏 */

	.list{
	  width:calc(100vw - 20px);
	  margin:10px;
	  background: #ffffff;
	  font-size: 14px;
	  /*background:#222222;*/
	  border-radius: 4px;
	  /*color: #ffffff;*/
	}
	.list_item ,navigator{
	  width:100%;
	  height:50px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom:1px solid #eee;
	}
	.list_item>button{
	  width:100%;
	  height:50px;
	  display: flex;
	  font-size: 14px;
	  justify-content: space-between;
	  align-items: center;
	  background: #ffffff;
	  /*background:#222222;*/
	  padding: 0;
	  /*color: #ffffff;*/
	}
	.list_item>button::after{
	  border: none;
	}
	.list_item>span:nth-child(1){
	  margin-left: 15px;
	}
	navigator>span:nth-child(1){
	  margin-left: 15px;
	}
	button>span:nth-child(1){
	  margin-left: 15px;
	}
	navigator>image,button>image{
	  width: 20px;
	  height: 20px;
	  margin: 0 12px 0 30rpx;
	}
	.list_item_arrow{
	  display: flex;
	  flex:1;
	  justify-content: flex-end;
	  margin-right:10px;
	}
	.list_item_arrow>image{
	  width:7px;
	  height:12px;
	}
	.phone-spec{
		display: flex;
		align-items: center;
		text{
			margin-right: 10px;
			color: grey;
		}
	}

	.cartIcon_wrapper{
	  position: relative;
	}
	.cartIcon{
	  font-size: 10px;
	  position: absolute;
	  background:red;
	  left:50px;
	  width:15px;
	  height: 15px;
	  line-height: 15px;
	  color:#fff;
	  text-align: center;
	  border-radius: 50%;
	  top:5px;
	}
	.cartIcon1{
	  font-size: 10px;
	  position: absolute;
	  background:red;
	  left:50px;
	  width:15px;
	  height: 15px;
	  line-height: 15px;
	  color:#fff;
	  text-align: center;
	  border-radius: 50%;
	  top:-5px;
	}

</style>
